<template>

<div class="swiperBox">

    <swiper :options="swiperOption" ref="mySwiper" v-if="swiperList.length">
    <!-- slides -->

    <swiper-slide  v-for="item in swiperList" :key="item.id"> 
        <img class="swiperImg" :src="item.imgUrl" alt="" >
    </swiper-slide>


    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>

  
  </swiper>

</div>
    
</template>


<script>
export default {
    name:'HomeSwiper',
    data(){
        return{
           swiperOption: {
               pagination:'.swiper-pagination',
               loop : true
           }
        }
    },
    props:['swiperList'],
}
</script>

<style lang="stylus" scoped>
    .swiperBox >>> .swiper-pagination-bullet-active
        background-color:#fff 
    .swiperBox
        overflow:hidden
        width:100%
        height:0
        padding-bottom:26.5%
        background-color:#ccc
        .swiperImg
             width:100%


</style>
